<template>
    <div class="wrapper">
<swiper  :options="swiperOption" >
    <!-- slides -->
    <swiper-slide v-for="item in imglist" :key="item.id">
        <a href="">
            <img class="swiper-img"
             :src="item.imgurl" alt="">
        </a>
    </swiper-slide>
  
   
    
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
  
  </swiper>

    </div>
</template>

<script>
    export default {
        name:"HomeSwiper",
        props:{
            imglist:Array
        },
        data(){
            return{
                  swiperOption:{
                pagination: '.swiper-pagination' ,
                //  autoplay: true,
                //  speed: 3000,
                loop:true
                },
               
               
            }
        }
    }
</script>

<style lang="stylus" scoped>
.wrapper >>>.swiper-pagination-bullet-active
 background-color #fff !important
.wrapper
  width 100%
  overflow hidden
  height 0
  padding-bottom 29%
 .swiper-img
    width 100%
</style>